<template>
    <div class="vnews">
        <div class="schoolicon"></div>
        <div class="schoolname"></div>
        <div class="title">
            <div class="word">新星熠熠熠荷伢汲汲汲  新星熠熠熠荷伢汲汲汲</div>
        </div>
        <div class="contentbox">
            <Imgbox :imgList="imgList" :selectimg="selectimg" :boxmode="boxmode"></Imgbox>
            <div class="dotbox">
                <div class="zone clearfix">
                    <div class="dot" v-for="(item,index) in imgList" :key="index" :class="[{'chose':index==selectimg}]"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            imgList:
            [
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599812981439&di=45ca138ed0ec74e54950ce01e9dedec3&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813079176&di=f344050c0a996e85c67c42405babb99d&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Frushidao%2Fpics%2Fhv1%2F20%2F108%2F1744%2F113431160.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813107237&di=9a599dcfa137d99d9ef74828b7f72434&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813125818&di=97ca805654d9111559c01c6092a56da4&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F52%2F52%2F01200000169026136208529565374.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599813140645&di=00e0e27323b8c9fc1f4fc9dc29093608&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg"
            ],
            timer:null,
            selectimg:0, //当前展示的图片下标
            boxmode:1, //1有边框 2无边框
        }
    },
    mounted(){
        this.changeImg()
    },
    methods:{
        //2s切换一次图片
        changeImg(){
            this.timer=setInterval(()=>{
                this.selectimg=(this.selectimg+1)%this.imgList.length
            },2000)
        }
    },
    destroyed(){
        clearInterval(this.timer)
        this.timer=null
    },
}
</script>

<style lang="scss" scoped>
.vnews{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(~@/assets/img/bigscreen/vnewsbg.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    .schoolicon{
        position: absolute;
        left: .73rem;
        top: .7rem;
        width: .5rem;
        height: .63rem;
        background: url(~@/assets/img/bigscreen/logo.png) no-repeat;
        background-size: 100% 100%;
    }
    .schoolname{
        position: absolute;
        left: 1.38rem;
        top:.74rem;
        width: 3.99rem;
        height: .6rem;
        background: url(~@/assets/img/bigscreen/schoolname.png) no-repeat;
        background-size: 100% 100%;
    }
    .title{
        position: absolute;
        left: 50%;
        top:2.34rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2.7rem;
        width: 12.1rem;
        transform: translateX(-50%);
        font-size: 1.2rem;
        .word{
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
        }
    }
    .contentbox{
        width: 15.9rem;
        height: 10.9rem;
        left: 50%;
        transform: translateX(-50%);
        top: 5.73rem;
        position: absolute;
        .dotbox{
            position: absolute;
            bottom: .8rem;
            left: 50%;
            transform: translateX(-50%);
            height: .64rem;
            width: auto;
            border-radius: .32rem;
            background: rgba($color: #000000, $alpha: .2);
            z-index: 101;
            .zone{
                padding: 0 .25rem;
                .dot{
                    background: #dcdad4;
                    width: .18rem;
                    height: .18rem;
                    border-radius: .09rem .09rem;
                    margin: .23rem .1rem;
                    float: left;
                    &.chose{
                        background: #f6f6f5;
                        width: .65rem;
                        height: .18rem;
                        border-radius: .06rem .06rem;
                        margin: .23rem .1rem;
                        float: left;
                    }
                }
            }
        }
    }
}
</style>
